<template>
  <div class="app-container">
    <div>
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">
          <Profile :user="formObj.userInfo" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="formObj.activeTab">

              <el-tab-pane :label="getLang('updProfile')" name="profile">
                <account :user="formObj.userInfo" />
              </el-tab-pane>
              <el-tab-pane :label="getLang('updPassword')" name="password">
                <Password :user="formObj.userInfo" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import * as app from '../common/utils/BaseApp'
import { parseTime, deepClone } from '@/utils'

// import { mapGetters } from 'vuex'
import Profile from './components/Profile'
import Account from './components/Account'
import Password from './components/Password'

// import Activity from './components/Activity'
// import Timeline from './components/Timeline'

import store from '@/store'
import { getUserProfile } from '@/api/system/user'
import langFile from './profile.lang'
const base = app.install({ langObj: langFile })
export default {
  name: 'ProfilePage',
  components: { Profile, Password, Account },
  mixins: [base],
  data() {
    return {
      formObj: {
        userInfo: {
          userName: '',
          jobTitles: '',
          telNo: '',
          email: '',
          orgs: '',
          roles: '',
          cerateDate: '',
          avatarFile: '',
          imgUrl: ''
        },
        activeTab: 'profile'
      }
    }
  },
  async created() {
    await this.searchUserProfile()
  },
  methods: {
    async searchUserProfile() {
      const result = await getUserProfile({
        searchForm: { loginName: store.getters.loginName }
      })
      const _target = this.formObj.userInfo
      if (result.data.listLine.length > 0) {
        const ret = result.data.listLine[0]
        _target.userName = ret.userName
        _target.telNo = ret.telNo
        _target.email = ret.email
        _target.cerateDate = parseTime(new Date(ret.created_at), '{y}-{m}-{d}')
        _target.jobTitles = result.data.addInfo.jobtitles.map((item) => {
          return item.JobName
        }).join('，')
        _target.orgs = result.data.addInfo.orgs.map((item) => {
          return item.orgName
        }).join('，')
        _target.roles = result.data.addInfo.roles.map((item) => {
          return item.roleName
        }).join('，')
        _target.avatarFile = result.data.addInfo.avatar.fileId
        _target.imgUrl = result.data.addInfo.avatar.fileName
      }
    }
  }
}
</script>
